<template>
  <div class="res">
    <Head title="注册" >
        <img class="left" @click="back" src="../assets/turn.png" alt="">
    </Head>
    <div class="wrapper">
      <div class="box_one">
        <img src="@/assets/phonesmall.png" />
        <input class="inpot" type="text" v-model="total.phone" placeholder="请输入手机号码" />
      </div>
      <div class="box_one">
        <img src="@/assets/letter.png" />
        <input class="inpot" type="text" v-model="total.code" placeholder="请输入验证码" />
        <span @click="code" class="code">{{codeold}}</span>
      </div>
      <div class="box_one">
        <img src="@/assets/usersmall.png" />
        <input class="inpot" type="text" v-model="total.name" placeholder="真实姓名" />
      </div>
      <div class="box_one">
        <img src="@/assets/ID.png" />
        <p class="sfz" @click="actionsheet">{{total.Identification}}</p>
        <img @click="actionsheet" class="right" src="@/assets/down-black.png" />
      </div>
      <div class="box_one">
        <img src="@/assets/ID.png" />
        <input class="inpot" type="text" v-model="total.sfz" placeholder="请输入证件号" />
      </div>
      <div class="box_one">
        <img src="@/assets/lock.png" />
        <input class="inpot" type="password" v-model="total.password" placeholder="请输入密码" />
      </div>
      <div class="box_one">
        <img src="@/assets/lock.png" />
        <input class="inpot" type="password" v-model="total.Rpassword" placeholder="请再次输入密码" />
      </div>
    </div>
    <div class="btn" @click="old_register">注册</div>
    <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
  </div>
</template>

<script>
import Head from "./header";
import { Actionsheet } from "mint-ui";
import { Toast, Indicator } from "mint-ui";
import { verifyCode, register } from "../old_request";
export default {
  data() {
    return {
      codeold: "获取验证码",
      send: 61,
      mobile: null,
      total: {
        Identification: "请选择证件类型"
      },
      actions: [
        {
          name: "居身份证民",
          method: this.getCamera
        },
        {
          name: "香港居民往来大陆通行证",
          method: this.getLibrary
        },
        {
          name: "澳门居民往来大陆通行证",
          method: this.sfz_A
        },
        {
          name: "台湾居民往来大陆通行证",
          method: this.sfz_B
        },
        {
          name: "外国人永久居留证",
          method: this.sfz_C
        },
        {
          name: "外国护照",
          method: this.sfz_D
        }
      ],
      sheetVisible: false
    };
  },
  components: {
    Head
  },
  methods: {
    back(){
      this.$router.back();
    },
    code() {
      let that = this;
      let data = {
        sign: that.$md5(
          `${that.wrapper.globalData()}mobile=${
            that.total.phone
          }timestamp=${that.wrapper.gettime()}`
        ),
        timestamp: that.wrapper.gettime(),
        mobile: that.total.phone
      };
      verifyCode(data, that).then(res => {
        console.log(res);
        if (res.code === 0) {
          that.down();
          Toast({
            message: "获取成功",
            iconClass: "iconfont icon-success_no_circle"
          });
        }
      });
    },
    down() {
      var that = this;
      var timer = setInterval(function() {
        if (that.send >= 1) {
          that.send--;
          that.codeold = that.send + "s";
        } else {
          that.codeold = "重发验证码";
          that.send = 61;
          clearInterval(timer);
        }
      }, 1000);
    },
    actionsheet() {
      this.sheetVisible = true; //开启底部弹起选择框
    },
    getCamera() {
      this.total.Identification = "居身份证民";
    },
    getLibrary() {
      this.total.Identification = "香港居民往来大陆通行证";
    },
    sfz_A() {
      this.total.Identification = "澳门居民往来大陆通行证";
    },
    sfz_B() {
      this.total.Identification = "台湾居民往来大陆通行证";
    },
    sfz_C() {
      this.total.Identification = "外国人永久居留证";
    },
    sfz_D() {
      this.total.Identification = "外国护照";
    },
    old_register() {
      //注册接口请求
      let that = this;
      var regNum = new RegExp("0?(1)[0-9]{10}", "g"); //判断用户输入的是否为手机号码
      var rsNum = regNum.exec(that.total.phone);
      var regname = new RegExp("^[\u4E00-\u9FA5]{1,6}$"); //判断用户输入的是否为小写字母
      var rsname = regname.exec(that.total.name);

      if (that.total.phone) {
        if (that.total.code) {
          if (that.total.name) {
            if (that.total.Identification) {
              if (that.total.sfz) {
                if (that.total.password) {
                  if (rsNum) {
                    if (rsname) {
                      if (that.total.password === that.total.Rpassword) {
                        that.yun_register();
                      } else {
                        Toast({
                          message: "两次密码不一致",
                          iconClass: "iconfont icon-cuowu"
                        });
                      }
                    } else {
                      Toast({
                        message: "请输入中文名",
                        iconClass: "iconfont icon-cuowu"
                      });
                    }
                  } else {
                    Toast({
                      message: "手机号格式有误",
                      iconClass: "iconfont icon-cuowu"
                    });
                  }
                } else {
                  Toast({
                    message: "密码不能为空",
                    iconClass: "iconfont icon-cuowu"
                  });
                }
              } else {
                Toast({
                  message: "证件号不能为空",
                  iconClass: "iconfont icon-cuowu"
                });
              }
            } else {
              Toast({
                message: "证件类型不能为空",
                iconClass: "iconfont icon-cuowu"
              });
            }
          } else {
            Toast({
              message: "姓名不能为空",
              iconClass: "iconfont icon-cuowu"
            });
          }
        } else {
          Toast({
            message: "验证码不能为空",
            iconClass: "iconfont icon-cuowu"
          });
        }
      } else {
        Toast({
          message: "手机号不能为空",
          iconClass: "iconfont icon-cuowu"
        });
      }
    },
    yun_register(){                                 //开始注册请求
    let that = this;
      let data = {
        "sign":that.$md5(`${that.wrapper.globalData()}mobile=${that.total.phone}timestamp=${that.wrapper.gettime()}`),
        "timestamp":that.wrapper.gettime(),
        "mobile":that.total.phone,
        "password":that.$md5(that.total.password),
        "name":that.total.name,
        "IDCard":that.total.sfz,
        "code":that.total.code
      }
  
      Indicator.open({
        text:'正在注册'
      })


      register(data,that).then( (res) => {
        console.log(res)
        Indicator.close();
        if(res.code === 0){
          Toast({
            message: "注册成功",
            iconClass: "iconfont icon-success_no_circle",
            duration: 1500
          });
          setTimeout(function(){
            that.$router.push('/')
          },2000)
        }
      })
    }
  }
};
</script>>

<style scoped>
.res{
  margin-top: 70px;
}
.wrapper {
  width: 90%;
  margin: 30px auto;
  background: #eeeeee;
  border-radius: 15px;
  padding: 10px 0px;
}
.left{
    position: absolute;
    left: -6px;
    transform: translateY(1px) !important;
    height: 22px !important;
}

.box_one {
  display: flex;
  /* justify-content: center;
    align-items: center; */
  background: #eeeeee;
  width: 90%;
  margin: 0 auto;
  padding: 6px 0;
  position: relative;
}

.box_one img {
  height: 28px;
}

.box_one .inpot {
  background: #eeeeee;
  border: none;
  outline: none;
  padding-left: 5px;
}

.code {
  width: 80px;
  border-radius: 50px;
  color: white;
  background: linear-gradient(to right, #128ae7, #12ade7);
  font-size: 12px;
  line-height: 25px;
  text-align: center;
  position: absolute;
  right: 0;
}

.sfz {
  font-size: 12px;
  margin: 5px 0 0 5px;
  color: #000;
}

.right {
  position: absolute;
  right: 0px;
  top: 10px;
  height: 18px !important;
}

.btn {
  width: 90%;
  height: 45px;
  line-height: 45px;
  margin: 0 auto;
  color: white;
  background: linear-gradient(to right, #128ae7, #12ade7);
  text-align: center;
  border-radius: 50px;
}

/* .res_code {
  display: flex;
  margin: 30px 0px;
  background: #e0e0e0;
  height: 35px;
  border-radius: 15px;
}
.res_code input {
  background: #e0e0e0;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border: none;
  outline: none;
}
.res_code span {
  height: 25px;
  line-height: 25px;
  margin-top: 6px;
  width: 70px;
  text-align: center;
  background: black;
  color: white;
  font-size: 12px;
  border-radius: 25px;
} */
</style>